<template>
  <div class="box">
    <div class="title">
      <h3>个人中心</h3>
    </div>
    <div class="order">
      <h3 @click="$router.push({path: '/my-order', query: {id: 0}})">我的订单 <span>查看全部订单</span> <span class="arrow"></span></h3>
      <ul class="navbox">
        <li class="item" @click="$router.push({path: '/my-order', query: {id: 1}})">
          <img src="../../static/images/icon_m1.png" alt="">
          <p>待付款</p>
        </li>
        <li class="item" @click="$router.push({path: '/my-order', query: {id: 2}})">
          <img src="../../static/images/icon_m2.png" alt="">
          <p>待发货</p>
        </li>
        <li class="item" @click="$router.push({path: '/my-order', query: {id: 3}})">
          <img src="../../static/images/icon_m3.png" alt="">
          <p>待收货</p>
        </li>
      </ul>
    </div>
    <div class="address" @click="$router.push('address')">
      <h3>我的地址 <span class="arrow"></span></h3>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mine',
  data(){
    return {
      now: 0,


    }
  }
}
</script>

<style scoped>
.title{
  height: 1.4rem;
  -webkit-box-shadow: 0 1px 3px #cddcdc;
  box-shadow: 0 1px 3px #cddcdc;
}
.title h3{
  height: 1.4rem;
  line-height: 1.4rem;
  text-align: center;
  color: #000;
  font-size: .42rem;
}
.order{
  padding: .3rem 0 0;
  border-bottom: .2rem solid #f1f1f1;
}
.order>h3{
  font-size: .4rem;
  height: 1.2rem;
  line-height: 1.2rem;
  color: #000;
  border-bottom: 1px solid #eaeaea;
  position: relative;
  padding: 0 .6rem 0 .3rem;
}
.order>h3 span{
  font-size: .34rem;
  float: right;
  color: #888;
}
.order>h3 .arrow{
  right: .3rem;
}
.navbox{
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  padding: .3rem .7rem;
}
.item img{
  display: block;
  width: .6rem;
  margin: 0 auto .15rem;
}
.item p{
  color: #333;
  font-size: .37rem;
}
.address{
  height: 1.2rem;
  line-height: 1.2rem;
}
.address h3{
  font-size: .4rem;
  height: 1.2rem;
  line-height: 1.2rem;
  color: #000;
  border-bottom: 1px solid #eaeaea;
  position: relative;
  padding: 0 .3rem;
}
.address .arrow{
  right: .4rem;
}
.box{
  margin-bottom: 2rem;
}
</style>
